import React, { forwardRef, useEffect, useState } from 'react'
import { Form, Input, Select } from 'antd'

const UserList = forwardRef((props, ref) => {
  const [form] = Form.useForm()
  const [isRegionDisable, setIsRegionDisable] = useState(false)
  const { regionList, roleList } = props

// 处理regionList 
const { roleId, region, role:{roleType} } = JSON.parse(
  localStorage.getItem('xinwen-token')
)

const reRegionList=JSON.parse(JSON.stringify(regionList)).map(item=>{
  if (roleId === 1 || item.value===region) {
    return item
  }else{
    return {
      ...item,
      disabled:true
    }
  }
})


const reRoleList=JSON.parse(JSON.stringify(roleList)).map(item=>{
  if (roleId === 1) {
    return item
  }else  if(roleId===2){
    return {
      ...item,
      disabled:item.roleType===1
    }
  }else{
    return {
      ...item,
      disabled:item.roleType!==3
    }
  }
 
})
console.log(reRoleList);

  useEffect(() => {
    setIsRegionDisable(props.isUpdateDisable)
  }, [props.isUpdateDisable])
  return (
    <Form
      ref={ref}
      form={form}
      layout="vertical"
      name="form_in_modal"
      initialValues={{
        modifier: 'public',
      }}
    >
      <Form.Item
        name="username"
        label="用户名"
        rules={[
          {
            required: true,
            message: 'Please input the title of collection!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="password"
        label="密码"
        rules={[
          {
            required: true,
            message: 'Please input the title of collection!',
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name="region"
        label="区域"
        rules={
          isRegionDisable
            ? []
            : [
                {
                  required: true,
                  message: 'Please input the title of collection!',
                },
              ]
        }
      >
        <Select
          disabled={isRegionDisable}
          options={reRegionList}
          fieldNames={{ lable: 'title', value: 'value' }}
        />
      </Form.Item>
      <Form.Item
        name="roleId"
        label="角色"
        rules={[
          {
            required: true,
            message: 'Please input the title of collection!',
          },
        ]}
      >
        <Select
          onChange={(value) => {
            if (value == 1) {
              setIsRegionDisable(true)
              ref.current.setFieldValue('region', '')
            } else {
              setIsRegionDisable(false)
            }
          }}
          options={reRoleList}
          //   fieldNames={{ lable: 'roleName', value: 'roleType' }}
        />
      </Form.Item>
    </Form>
  )
})
export default UserList
